<?php include("/includes/header.php") ?>
<?php include("/includes/sidebar.php") ?>
<?php $id = base64_decode($_GET[trim(base64_encode("idroom"), '=')]); ?>

<?php
	$data_room = getRoom($id);
	$data_agent = fetchAgent();
	$data_now = date('Y-m-d');
	$time_now = date('h:i:s');
?>

<style type="text/css">
	.required {
		color: red;
		font-weight: bold;
	}
</style>
<!-- <div class="header">
	<span>
		<a href="room.php">
			<i class="fa fa-building-o"></i> Data Kamar
		</a>
	</span>
	<span>
		<a href="room-form.php?act=new">
			<i class="fa fa-plus"></i> Tambah Kamar
		</a>
	</span>
</div> -->

<div class="content row-fluid">
	<div class="span12 table-placer">
		<div class="alert alert-info"><h4>Checkin Form - <?php echo $data_room["nama"]; ?></h4></div>
		<div class="row-fluid index-pos-placer content">
			<?php
				$sql = "SELECT * FROM front_office WHERE idroom = '".$id."' AND is_paid = '0'";
				$query = mysql_query($sql);
				if (mysql_num_rows($query) > 0) {
			?>
			<div class="alert alert-info">
			  <p>
			  	Room has already been occoupied please check the other room or wait for the occupier to checkout.
			  	<br>
			  	<a href="fo-index.php" class="btn esc">Exit (ESC)</a>
			  </p>
			</div>
			<?php
				} else {
			?>
			<form id="form_checkin" action="action/act_fo.php" class="" method="POST">
				<div class="row-fluid">
					<div class="span6">
						<fieldset>
							<legend>Personal Information</legend>
							<input type="hidden" value="checkin" name="act">
							<input type="hidden" value="<?php echo $id; ?>" name="idroom">
							<div class="control-group">
								<label class="control-label" for="nama"><span class="required">* </span>Name</label>
								<div class="controls">
									<input type="text" class="input-xlarge" placeholder="Visitor's Name" id="nama" name="nama">
									<!-- <p class="help-block">In addition to freeform text, any HTML5 text-based input appears like so.</p> -->
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="pekerjaan">Occupation</label>
								<div class="controls">
									<input type="text" class="input-xlarge" placeholder="Visitor's Occupation" id="pekerjaan" name="pekerjaan">
									<!-- <p class="help-block">In addition to freeform text, any HTML5 text-based input appears like so.</p> -->
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="tempat_lahir"><span class="required">* </span>Place / Date of Birth</label>
								<div class="controls">
									<input type="text" class="input-medium" placeholder="Place of Birth" id="tempat_lahir" name="tempat_lahir">
									/
									<div class="input-append date datePicker" id="dpMonths" data-date="" data-date-format="yyyy-mm-dd" data-date-autoclose="true" data-date-start-view="decade" data-date-minviewmode="date">
										<input type="text" class="input-medium" placeholder="yyyy-mm-dd" id="tanggal_lahir" name="tanggal_lahir" value="" readonly="">
										<span class="add-on"><i class="icon-calendar"></i></span>
				  					</div>
									<!-- <input type="text" class="input-medium datePicker" placeholder="yyyy-mm-dd" id="date-birth" disabled> -->
									<!-- <p class="help-block">In addition to freeform text, any HTML5 text-based input appears like so.</p> -->
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="">Gender</label>
								<div class="controls">
									<label class="radio">
										<input type="radio" name="jenis_kelamin" id="male" value="m" checked>
										Male
									</label>
									<label class="radio">
										<input type="radio" name="jenis_kelamin" id="female" value="f">
										Female
									</label>
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="email">Email Address</label>
								<div class="controls">
									<input type="text" class="input-xlarge" placeholder="person@example.com" id="email" name="email">
									<!-- <p class="help-block">In addition to freeform text, any HTML5 text-based input appears like so.</p> -->
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="telepon">Phone Number</label>
								<div class="controls">
									<input type="text" class="input-xlarge" placeholder="+xx-xxxx-xxxx" id="telepon" name="telepon">
									<!-- <p class="help-block">In addition to freeform text, any HTML5 text-based input appears like so.</p> -->
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="passport">Passport Number</label>
								<div class="controls">
									<input type="text" class="input-xlarge" placeholder="xxxxxxx-xxxxxxxxxxx-xxxxxxxxxx" id="passport" name="passport">
									<!-- <p class="help-block">In addition to freeform text, any HTML5 text-based input appears like so.</p> -->
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="alamat">Address</label>
								<div class="controls">
									<textarea class="input-xlarge" placeholder="Visitor's Address" id="alamat" name="alamat" rows="3"></textarea>
								</div>
							</div>
						</fieldset>
					</div>
					<div class="span6">
						<fieldset>
							<legend>Visiting Information</legend>
							<div class="control-group">
								<label class="control-label" for="checkin"><span class="required">* </span>Checkin Date</label>
								<div class="controls">
									<div class="input-append date" id="checkinPicker" data-date="" data-date-format="yyyy-mm-dd" data-date-autoclose="true" data-date-start-view="year" data-date-minviewmode="date">
										<input type="text" class="input-large" placeholder="Date of Checkin - yyyy-mm-dd" id="checkin" name="checkin" data-date-format="yyyy-mm-dd" readonly="" value="<?php echo $data_now; ?>">
										<span class="add-on"><i class="icon-calendar"></i></span>
				  					</div>
									<!-- <p class="help-block">In addition to freeform text, any HTML5 text-based input appears like so.</p> -->
									/
									<div class="input-append bootstrap-timepicker">
										<input id="checkin_time_temp" type="text" class="input-small">
										<input type="hidden" id="checkin_time" name="checkin_time" value="<?php echo $time_now; ?>">
										<span class="add-on"><i class="icon-time"></i></span>
									</div>
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="checkout"><span class="required">* </span>Checkout Date</label>
								<div class="controls">
									<div class="input-append date" id="checkoutPicker" data-date="" data-date-format="yyyy-mm-dd" data-date-autoclose="true" data-date-start-view="year" data-date-minviewmode="date">
										<input type="text" class="input-large" placeholder="Date of Checkout - yyyy-mm-dd" id="checkout" name="checkout" data-date-format="yyyy-mm-dd" readonly="" value="<?php echo $data_now; ?>">
										<span class="add-on"><i class="icon-calendar"></i></span>
				  					</div>
									<!-- <p class="help-block">In addition to freeform text, any HTML5 text-based input appears like so.</p> -->
									/
									<div class="input-append bootstrap-timepicker">
										<input id="checkout_time_temp" type="text" class="input-small">
										<input type="hidden" id="checkout_time" name="checkout_time" value="<?php echo $time_now; ?>">
										<span class="add-on"><i class="icon-time"></i></span>
									</div>
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="tanggal_kedatangan"><span class="required">* </span>Arrival Date</label>
								<div class="controls">
									<div class="input-append date" id="kedatanganPicker" data-date="" data-date-format="yyyy-mm-dd" data-date-autoclose="true" data-date-start-view="year" data-date-minviewmode="date">
										<input type="text" class="input-large" placeholder="Date of Arrival - yyyy-mm-dd" id="tanggal_kedatangan" name="tanggal_kedatangan" readonly="">
										<span class="add-on"><i class="icon-calendar"></i></span>
				  					</div>
									<!-- <p class="help-block">In addition to freeform text, any HTML5 text-based input appears like so.</p> -->
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="tanggal_keberangkatan"><span class="required">* </span>Departure Date</label>
								<div class="controls">
									<div class="input-append date" id="keberangkatanPicker" data-date="" data-date-format="yyyy-mm-dd" data-date-autoclose="true" data-date-start-view="year" data-date-minviewmode="date">
										<input type="text" class="input-large" placeholder="Date of Departure  - yyyy-mm-dd" id="tanggal_keberangkatan" name="tanggal_keberangkatan" readonly="">
										<span class="add-on"><i class="icon-calendar"></i></span>
				  					</div>
									<!-- <p class="help-block">In addition to freeform text, any HTML5 text-based input appears like so.</p> -->
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="datang_dari">Coming From</label>
								<div class="controls">
									<input type="text" class="input-xlarge" placeholder="Place the visitor is coming from" id="datang_dari" name="datang_dari">
									<!-- <p class="help-block">In addition to freeform text, any HTML5 text-based input appears like so.</p> -->
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="pergi_ke">Going To</label>
								<div class="controls">
									<input type="text" class="input-xlarge" placeholder="Place the visitor is going to" id="pergi_ke" name="pergi_ke">
									<!-- <p class="help-block">In addition to freeform text, any HTML5 text-based input appears like so.</p> -->
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="idagent">Agent</label>
								<div class="controls">
									<select id="idagent" name="idagent"class="input-xlarge" >
									<option></option>
									<?php
										foreach ($data_agent as $value) {
									?>
										<option value="<?php echo $value["id"]; ?>"><?php echo $value["nama"]; ?></option>
									<?php
										}
									?>
									</select>
									<!-- <input type="text" class="input-xlarge" placeholder="Agent that bring the visitor"> -->
									<!-- <p class="help-block">In addition to freeform text, any HTML5 text-based input appears like so.</p> -->
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="tipe_kunjungan">Purpose of Visit</label>
								<div class="controls">
									<input type="text" class="input-xlarge" placeholder="The reason of visiting" id="tipe_kunjungan" name="tipe_kunjungan">
									<!-- <p class="help-block">In addition to freeform text, any HTML5 text-based input appears like so.</p> -->
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="banyak_orang">Person</label>
								<div class="controls">
									<input id="banyak_orang" type="text" value="1" name="banyak_orang">
									<!-- <p class="help-block">In addition to freeform text, any HTML5 text-based input appears like so.</p> -->
								</div>
							</div>
						</fieldset>
					</div>
				</div>
				<div class="row-fluid">
					<fieldset>
						<div class="form-actions">
							<button type="submit" class="btn btn-primary f2">Submit (F2)</button>
							<a href="fo-index.php" class="btn esc">Cancel (ESC)</a>
						</div>
					</fieldset>
				</div>
			</form>
			<?php
				}
			?>
		</div>
	</div>
</div>

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
	<div class="modal-header">
		<h3>Checkin Confirmation</h3>
	</div>
	<div class="modal-body">
		<p>
			<div id="message_checkin" class="alert alert-info">
			  <p></p>
			  <p class="hide">
			  	Do You want to add the details of the other person now?
			  	<br>
			  	<a href="fo_guests_details.php?<?php echo trim(base64_encode("id"), '=')."="; ?>" id="add_now" class="btn btn-mini">Add details now (F3)</a>
			  	<a href="#" id="add_later" class="btn btn-mini">Add details later (ESC)</a>
			  </p>
			</div>
		</p>
	</div>
</div>

<div class="footer">
</div>

<?php include("/includes/footer.php") ?>

<script type="text/javascript">
	$(document).ready(function() {
		var elPop;
		$('.index-pos').popover();
		$("#idagent").select2({
		    placeholder: "Select an Agent",
		    allowClear: true
		});
		$('.table-placer').on('click', '.index-pos', function(event) {
			event.preventDefault();
			/* Act on the event */
			// elPop = $(this);
			// $(".index-pos").popover("hide");
		});
		$('#checkin_time_temp').timepicker().on('changeTime.timepicker', function(e) {
			var jumlah = 0;
			if (e.time.meridian == 'PM') {
				jumlah = 12;
			};
			var jam = (e.time.hours)+jumlah;
			if (jam > 23) {
				jam = 0;
			};
			var menit = e.time.minutes;
			$('#checkin_time').val(jam+":"+menit);
		});
		$('#checkout_time_temp').timepicker().on('changeTime.timepicker', function(e) {
			var jumlah = 0;
			if (e.time.meridian == 'PM') {
				jumlah = 12;
			};
			var jam = (e.time.hours)+jumlah;
			if (jam > 23) {
				jam = 0;
			};
			var menit = e.time.minutes;
			$('#checkout_time').val(jam+":"+menit);
		});

		var nowTemp = new Date();
		var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);

		var checkin = $('#checkinPicker').datepicker().on('changeDate', function(ev) {
		  if (ev.date.valueOf() > checkout.getDate().valueOf()) {
		    var newDate = new Date(ev.date)
	        newDate.setDate(newDate.getDate() + 1);
	        checkout.setValue(newDate);
	        checkout.setDate(newDate);
	        checkout.update();
		  }
		}).data('datepicker');

		var checkout = $('#checkoutPicker').datepicker({
		  beforeShowDay: function(date) {
				return date.valueOf() > checkin.getDate().valueOf();
		  }
		}).on('changeDate', function(ev) {
		  // checkout.hide();
		}).data('datepicker');

		var kedatangan = $('#kedatanganPicker').datepicker({
		}).on('changeDate', function(ev) {
		  if (ev.date.valueOf() > keberangkatan.getDate().valueOf()) {
		    var newDate = new Date(ev.date)
	        newDate.setDate(newDate.getDate() + 1);
	        keberangkatan.setValue(newDate);
	        keberangkatan.setDate(newDate);
	        keberangkatan.update();
		  }
		}).data('datepicker');

		var keberangkatan = $('#keberangkatanPicker').datepicker({
		  beforeShowDay: function(date) {
				return date.valueOf() > kedatangan.getDate().valueOf();
		  }
		}).on('changeDate', function(ev) {
		  // checkout.hide();
		}).data('datepicker');

		$('#datang_dari').typeahead({
			source: function(typeahead, query) {
				$.ajax({
					url: "/ajax/json_source_typeahead.php",
					dataType: "json",
					type: "POST",
					data: {
						key: query,
						act: "datang_dari"
					},
					success: function(data) {
						var return_list = [], i = data.length;
						while (i--) {
							return_list[i] = {value: data[i].source};
						}
						typeahead.process(return_list);
					}
				});
			}
		});

		$('#pergi_ke').typeahead({
			source: function(typeahead, query) {
				$.ajax({
					url: "/ajax/json_source_typeahead.php",
					dataType: "json",
					type: "POST",
					data: {
						key: query,
						act: "pergi_ke"
					},
					success: function(data) {
						var return_list = [], i = data.length;
						while (i--) {
							return_list[i] = {value: data[i].source};
						}
						typeahead.process(return_list);
					}
				});
			}
		});

		$('#tipe_kunjungan').typeahead({
			source: function(typeahead, query) {
				$.ajax({
					url: "/ajax/json_source_typeahead.php",
					dataType: "json",
					type: "POST",
					data: {
						key: query,
						act: "tipe_kunjungan"
					},
					success: function(data) {
						var return_list = [], i = data.length;
						while (i--) {
							return_list[i] = {value: data[i].source};
						}
						typeahead.process(return_list);
					}
				});
			}
		});

		$("#banyak_orang").spinedit({
			minimum: 1,
			maximum: 4,
			step: 1,
			value: 0
		});

		$('#form_checkin').submit(function(event) {
			/* Act on the event */
			event.preventDefault();
			var dataCheckin = $(':input').serializeArray();

			$.ajax({
				url: 'action/act_fo.php',
				type: 'POST',
				dataType: 'json',
				data: dataCheckin,
			})
			.done(function(data) {
				$('#message_checkin p').first().html(data.msg);
				$('#myModal').modal("show");
				if (data.status == 1) {
					if (data.banyak > 0) {
						$('#message_checkin p').last().show();
						$('#add_now').attr('href', $('#add_now').attr('href')+data.id).addClass('f3');
					};
				} else {
					$('#message_checkin p').first().append("<br><a href='#' class='btn' data-dismiss='modal' aria-hidden='true'>Close</a>");
				}
			})
			.fail(function() {
			})
			.always(function() {
			});

		});
	});
</script>